<template>
	<view class="likePage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="headContentBack1"></view>
				<view class="headContentBack2"></view>
				<p>我的</p>
			</view>
		</view>
		<view class="funTitle">推荐功能</view>
		<scroll-view scroll-y :show-scrollbar="false" class="pageContent">
			<view class="functionBtn" @click="constellation">
				<view style="line-height: 80rpx;">星座</view><view style="line-height: 40rpx;">运势</view>
			</view>
			<view class="functionBtn" @click="addBooks">记账</view>
			<view class="functionBtn" @click="addThings">记事</view>
			<view class="functionBtn" @click="openTypePopup">
				<view style="line-height: 80rpx;">类型</view><view style="line-height: 40rpx;">管理</view>
			</view>
			<view class="functionBtn" @click="goBillingManagement('change')">
				<view style="line-height: 80rpx;">账单</view><view style="line-height: 40rpx;">管理</view>
			</view>
			<view class="functionBtn" @click="goBillingManagement('export')">
				<view style="line-height: 80rpx;">账单</view><view style="line-height: 40rpx;">导出</view>
			</view>
			<view class="functionBtn" @click="goNear">
				<view style="line-height: 80rpx;">账单</view><view style="line-height: 40rpx;">明细</view>
			</view>
			<view class="functionBtn" @click="openSay(true)">
				<view style="line-height: 80rpx;">使用</view><view style="line-height: 40rpx;">说明</view>
			</view>
			<view class="functionBtn" @click="openSay(false)">
				<view style="line-height: 80rpx;">关于</view><view style="line-height: 40rpx;">我们</view>
			</view>
		</scroll-view>
		
		<view class="funTitle">功能预告</view>
		<scroll-view scroll-y :show-scrollbar="false" class="pageContent">
			<view class="functionBtn1" @click="tipShow">
				<view style="line-height: 80rpx;">账单</view><view style="line-height: 40rpx;">导入</view>
			</view>
			<view class="functionBtn1" @click="tipShow">
				<view style="line-height: 80rpx;">汇率</view><view style="line-height: 40rpx;">换算</view>
			</view>
			<!-- <view class="functionBtn1" @click="tipShow">宜女</view> -->
			<view class="functionBtn1" @click="tipShow">
				<view style="line-height: 80rpx;">体重</view><view style="line-height: 40rpx;">历程</view>
			</view>
		</scroll-view>
		
		<typePopup ref="popupShow"></typePopup>
		<userTalk ref="uesrPopupShow"></userTalk>
	</view>
</template>

<script>
	import typePopup from '../../components/typePopup.vue'
	import userTalk from '../../components/userTalk.vue'
	export default {
		data() {
		    return {
				
			}
		},
		components: {
			typePopup,
			userTalk
		},
		methods: {
			tipShow(){
				uni.showToast({
					title: '等等，再等等...',
					icon: 'none',
					duration: 1500
				})
			},
			openSay(key){
				this.$refs.uesrPopupShow.openPopup(key)
			},
			goNear(){
				uni.navigateTo({
					url: '../Region/nearRegion/nearRegion'
				});
			},
			goBillingManagement(key){
				uni.navigateTo({
					url: '../BillingManagement/billingManagement?key=' + key
				});
			},
			openTypePopup(){
				this.$refs.popupShow.getRegionList(1)
			},
			addBooks(){
				uni.navigateTo({
					url: '../AddBooks/addBooks'
				});
			},
			addThings(){
				uni.navigateTo({
					url: '../AddThings/addThings'
				});
			},
			constellation(){
				uni.navigateTo({
					url: '../Constellation/constellation'
				});
			},
		}
	}
</script>

<style>
	.likePage{
		position: relative;
		top: 0;
		height: 100vh;
		width: 100%;
		background-color: rgba(250, 250, 250,0.8);
	}
	
	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		background:linear-gradient(to right ,rgba(216, 8, 53, 0.9),rgba(216, 8, 53, 0.4));
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		z-index: 30;
		margin-top: 1vh;
		left: 20rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: rgba(190, 246, 255, 1.0);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(216, 8, 53, 0.3);
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(216, 8, 53, 0.5);
	}
	
	.pageContent {
		width: 750rpx;
		/* height: calc(85vh - 82rpx); */
		height: 500rpx;
		position: relative;
		top: 0;
		z-index: 100;
	}
	
	.funTitle{
		margin: 20rpx 27rpx 4rpx 27rpx;
		width: 696rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: rgba(152, 152, 152, 1.0);
		letter-spacing: 2rpx;
		border-bottom: 1rpx solid rgba(191, 191, 191, 1.0);
	}
	
	.functionBtn{
		width: 120rpx;
		height: 120rpx;
		margin: 20rpx 27rpx 10rpx 27rpx;
		float: left;
		border-radius: 10rpx;
		background-image: linear-gradient(45deg, rgba(216, 8, 53, 0.7) 0%, rgba(216, 8, 53, 0.5)  51%, rgba(216, 8, 53, 0.7)  100%);
		font-size: 32rpx;
		color: rgba(250, 250, 250, 0.8);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.functionBtn1{
		width: 120rpx;
		height: 120rpx;
		margin: 20rpx 27rpx 10rpx 27rpx;
		float: left;
		border-radius: 10rpx;
		background-image: linear-gradient(45deg, rgba(82, 82, 82, 0.7) 0%, rgba(82, 82, 82, 0.5)  51%, rgba(82, 82, 82, 0.7)  100%);
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.functionBtn > view{
		height: 60rpx;
	}
	
	.functionBtn1 > view{
		height: 60rpx;
	}
</style>
